<template>
  <div class="left_cage" style="padding-top: 10px;">
    <div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important; height: 24%;">
      <video autoplay muted playsinline loop class="dataAllBorder02 video_cage">
        <source class="video" title="航拍视频" :src="mv"/>
      </video>
    </div>
    <div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 38%;">
      <div class="dataAllBorder02 video_cage">
        <img class="video_around video_around_chose" :src="video">
        <img class="video_around" :src="video">
        <img class="video_around" :src="video">
        <img class="video_around" :src="video">
      </div>
    </div>
    <div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 32%; position: relative;">
      <div class="dataAllBorder02" style="padding: 1.2%; overflow: hidden">
        <div class="message_scroll_box">
          <vue-seamless-scroll :class-option="defaultOption" :data="list" class="warp">
            <div class="message_scroll" v-for="(item, index) in list" :key='index'>
              <div class="scroll_top">
                <span class="scroll_title">{{item.scrollTitle}}</span>
                <span :class="item.level">{{item.levelText}}</span>
                <a class="localize"></a>
                <span class="scroll_timer">{{item.time}}</span>
              </div>
              <div class="msg_cage">
                <a class="localize_title">{{item.localizeTitle}}</a>
              </div>
              <div class="msg_cage">
                <a class="localize_msg">{{item.localizeMsg}}</a>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import mv from "@/assets/screen/screen2/video/mv.mp4";
  import video from "@/assets/screen/screen2/video/video.jpg";
  import vueSeamlessScroll from 'vue-seamless-scroll';

  export default {
    name: "page1Left",
    components: { vueSeamlessScroll },
    computed: {
      defaultOption() {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 4, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          // singleHeight: 90, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        }
      },
    },
    data() {
      return {
        mv: mv,
        video: video,
        list: [{
          scrollTitle: "拌合站数据警示",
          level: "scroll_level scroll_level01",
          levelText: "一级",
          time: "2023-01-10 11:24:35",
          localizeTitle: "沙石配合比预警",
          localizeMsg: "二标段1号拌合站"
        }, {
          scrollTitle: "拌合站数据警示",
          level: "scroll_level scroll_level03",
          levelText: "三级",
          time: "2023-01-11 15:18:58",
          localizeTitle: "沙石配合比预警",
          localizeMsg: "一标段2号拌合站"
        }, {
          scrollTitle: "拌合站数据警示",
          level: "scroll_level scroll_level02",
          levelText: "二级",
          time: "2023-01-12 16:37:25",
          localizeTitle: "沙石配合比预警",
          localizeMsg: "三标段1号拌合站"
        }, {
          scrollTitle: "拌合站数据警示",
          level: "scroll_level scroll_level01",
          levelText: "一级",
          time: "2023-01-13 17:12:23",
          localizeTitle: "油石料温度检测仪损坏",
          localizeMsg: "四标段1号拌合站"
        }]
      }
    }
  }

</script>

<style lang="scss" scoped>

  @import "~@/assets/screen/screen2/scss/common.scss";

  .left_cage {
    width: 22%;
    height: 100%;
    margin-left: 0.3%;
    float: left;
  }

  .video_cage {
    padding: 4px;
    width: 100%;
    object-fit: fill;
  }

  .video {
    height: 100%;
    width: 100%;
  }

  .video_around {
    width: 49.5%;
    height: 49.5%;
    float: left;
    object-fit: fill;
  }

  .video_around:hover {
    border: #8bff62 2px solid;
  }

  .video_around_chose {
    border: #8bff62 2px solid;
  }

  .over_hide {
    overflow: hidden;
  }

  .message_scroll {
    border: rgba(12, 122, 200, 0.5) 1px solid;
    background-color: rgba(20, 66, 125, 0.12);
    height: 90px;
    cursor: pointer;
    margin-bottom: 6px;
  }

  .scroll_top {
    height: 25px;
  }

  .scroll_title {
    float: left;
    background-image: url("~@/assets/screen/screen2/img/pushmessage_class.png");
    background-repeat: no-repeat;
    width: 150px;
    line-height: 25px;
    color: white;
    font-size: 14px;
    text-align: center;
  }

  .scroll_level {
    float: left;
    background-repeat: no-repeat;
    line-height: 25px;
    width: 56px;
    background-position-y: 3px;
    color: white;
    font-size: 12px;
    text-align: center;
    margin-left: 8px;
  }

  .scroll_level01 {
    background-image: url("~@/assets/screen/screen2/img/pushmessage_level01.png");
  }

  .scroll_level02 {
    background-image: url("~@/assets/screen/screen2/img/pushmessage_level02.png");
  }

  .scroll_level03 {
    background-image: url("~@/assets/screen/screen2/img/pushmessage_level03.png");
  }

  .localize {
    display: block;
    line-height: 25px;
    margin-left: 8px;
    background-image: url("~@/assets/screen/screen2/img/pushmessage_localize_01.png");
    background-repeat: no-repeat;
    background-position-y: 3px;
    width: 14px;
    height: 25px;
    float: left;
  }

  .localize:hover {
    background-image: url("~@/assets/screen/screen2/img/pushmessage_localize_02.png");
  }

  .scroll_timer {
    color: #4a97da;
    font-size: 12px;
    line-height: 25px;
    text-align: right;
    display: block;
    float: right;
    margin-right: 5px;
  }

  .msg_cage {
    padding-left: 10px;
    padding-right: 6px;
    height: 18px;
    overflow: hidden;
    margin-top: 8px;
  }

  .localize_title {
    color: #2c85d2;
  }

  .localize_msg {
    font-size: 14px;
    color: white;
  }
  .warp {
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
    /*height: 270px;*/
  }
</style>
